<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>157箭头函数</title>
</head>

<body>
  <h1>157箭头函数</h1>
  <script>
    /*
      一、箭头函数
        1 箭头函数的优点
          写法简单
        2 场景
          将一些匿名函数用箭头函数的形式实现
        3 箭头函数和普通函数的区别
          箭头函数没有argumetns参数，但是可以正常使用剩余参数。
          箭头函数不会创建自己的this，它只会沿着自己的作用域链的上一层沿用this。
    */
    function fn(x, y) {
      console.log(x, y)
      return x + y
    }
    console.log(fn(1, 2))
    // 用箭头函数实现
    let foo = (x, y) => {
      console.log(x, y)
      return x + y
    }
    console.log(foo(1, 2))

    // 箭头函数的简化
    function a(n) {
      return n
    }
    console.log(a(1))
    let b = n => n // 一个形参，箭头函数的括号可以省略；函数体一行代码，花括号可以省略，return也可以省略。
    console.log(b(1))

    // 箭头函数返回一个对象
    const c = myName => ({ myName }) // 用()防止对象的{}被误认为代码块
    console.log(c('lqj'))

    // 4 函数中this的指向：谁调用的该函数，则该函数内的this就指向谁
    console.log(this) // this指向window

    function d() {
      console.log(this)
    }
    d() // this指向window，因为d()等同于window.d()，此处是window在调用函数d

    let obj = {
      name: 'lqj',
      sayHello() {
        console.log(this)
      }
    }
    obj.sayHello() // this指向obj，因为是obj调用的sayHello方法。
  </script>
</body>

</html>